<template>
  <el-form ref="dataForm" :rules="rules" :model="user" label-position="right" label-width="90px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="真实姓名" prop="realName">
          <el-input id="realName" v-model.trim="user.realName" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="昵称" prop="nickName">
          <el-input id="nickName" v-model.trim="user.nickName" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手机号码" prop="phone">
          <el-input id="phone" v-model="user.phone" placeholder="请输入手机号码" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input id="email" v-model="user.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker id="birthday" v-model="user.birthday" type="date" placeholder="请选择出生日期" style="width:100%" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="sex">
          <el-radio-group id="sex" v-model="user.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="地址" prop="address">
          <el-input id="address" v-model="user.address" placeholder="请输入地址" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="备注">
          <el-input v-model="user.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="请输入备注" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item>
      <el-button icon="el-icon-check" type="primary" @click="submit">保存基本信息</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { updateBaseInfo } from '@/api/user'
export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {
          name: '',
          email: ''
        }
      }
    },
    rules: {
      type: Object,
      default: () => {
        return {
          realName: [{ required: true, message: '真实姓名不能为空', trigger: 'blur' }],
          phone: [{ required: true, message: '手机号码不能为空', trigger: 'blur' }],
          birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }]
        }
      }
    }
  },
  methods: {
    submit() {
      this.$refs['jbxxForm'].validate((valid) => {
        if (valid) {
          this.$confirm('确定修改个人基础信息？', '提示信息', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(async() => {
              const tempData = Object.assign({}, this.user)
              await updateBaseInfo(tempData)
              this.$message({
                type: 'success',
                message: '修改个人基础信息成功!'
              })
            })
            .catch(err => { console.error(err) })
        }
      })
    }
  }
}
</script>
